<app-common-header [title]="'myAccount.setting.personal_informations.user_name.title'|translate"></app-common-header>
<ion-content>
  <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="updateUserNameAndPhoto()">
    <ion-row>
      <ion-col size="12" class="photo-col">
        <div class="photo_content">
          <img src="{{appUser.photoUrl}}" alt="">
        </div>
        <ion-button class="secondary-btn" size="small" fill="clean" (click)="openSelectPicture()">
          {{'myAccount.setting.personal_informations.user_name.update_photo'|translate}}
        </ion-button>
      </ion-col>
    </ion-row>
    <ion-row  class="input-border-bottom">
      <ion-col size="4">
        <div class="label-item">{{'myAccount.setting.personal_informations.user_name.user_name'|translate}}</div>
      </ion-col>
      <ion-col size="8">
        <ion-input clearInput="true" maxlength="50" formControlName="userName" [(ngModel)]="appUser.userName" placeholder="{{'myAccount.setting.personal_informations.user_name.user_name'|translate}}"></ion-input>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" *ngIf="userName.invalid&& (userName.dirty || userName.touched)">
        <div *ngIf="userName.errors.required" class="form-error-item">
          {{'myAccount.setting.personal_informations.user_name.userNameRequired'|translate}}
        </div>
      </ion-col>
    </ion-row>
    <ion-row class="item-row">
      <ion-col size="12">
        <ion-button expand="full" fill="clear" class="customer-btn"  type="submit" [disabled]='validateForm.invalid || loading'>
          {{'myAccount.setting.personal_informations.user_name.confirm'|translate}}
          <ion-spinner [hidden]="!loading"></ion-spinner>
        </ion-button>
      </ion-col>
    </ion-row>
  </form>
</ion-content>